<template>
    <div class="app-container"> 
        <el-form :inline="true" :model="query_form" size="mini"> 
            <el-form-item label="订单名称">
                <el-input v-model="query_form.SerchKeyword" placeholder="请输入订单名称"></el-input>
            </el-form-item> 
            <el-form-item>
                <el-button type="primary" :loading="btnloading" @click="getlistdata(true)" circle icon="el-icon-search"></el-button>
                <el-button type="primary" @click="create_new_factory_order()" icon="el-icon-circle-plus-outline" circle></el-button>
            </el-form-item>
            </el-form>
 
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                header-cell-class-name="tableheader">
        <el-table-column align="center" label="订单名称">
          <template slot-scope="scope">
            {{ scope.row.order_name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="链接">
          <template slot-scope="scope">
            {{ $api.replace("/book","") }}/#/factory_view?fid={{ scope.row.nw_factory_order_id }}
          </template>
        </el-table-column> 
        <el-table-column align="center" label="发起时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.addtime }}
          </template>
        </el-table-column>   
        <el-table-column align="center" label="更新时间" width="150">
          <template slot-scope="scope">
            {{ scope.row.update_time }}
          </template>
        </el-table-column>   
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope"> 
            <el-button type="primary" size="mini" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
            

            <el-button style="margin-top:3px;" type="danger" size="mini" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
             </template>
        </el-table-column>
      </el-table>
 
      <div class="pagination">
        <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="query_form.page"
          :page-size="query_form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      
      <el-dialog title="保存工厂订单" :visible.sync="adddialog" :fullscreen="true" :close-on-click-modal="false">
        <el-form :model="add_form" ref="add_form" :rules="rule" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="order_name">
                        <el-input v-model="add_form.order_name"  placeholder="请输入订单名称,不填则按时间自动生成"></el-input>
                    </el-form-item>
                </el-col>  
            </el-row> 
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注一下" prop="remark">
                        <el-input type="textarea" v-model="add_form.remark"  placeholder="请输入活动备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row> 

            <el-container> 
                <el-main>
                    <el-tabs type="border-card" v-model="def_tab">
                        <el-tab-pane 
                          v-for="item in material_list"
                          :key="item.type_id"
                          :label="item.type_name" 
                          :name="item.type_id"  
                        >
                        <el-table ref="innertable" :key="table_reload_key" row-key="material_id" :data="item.inner_list"  style="height:400px; overflow-y: scroll;" 
                        >
                            <el-table-column  label="显?"
                                width="55" prop="factory_order_details_state">
                                   <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.factory_order_details_state"
                                        :active-value="1" 
                                        :inactive-value="0" 
                                        @change="factory_order_state_change($event,scope.row)"
                                        >
                                        </el-switch>
                                    </template> 
                            </el-table-column>

                            <el-table-column prop="material_name" label="物料" width="140">
                            </el-table-column>
                            <el-table-column prop="material_no" label="编号" width="120">
                            </el-table-column>
                            <el-table-column prop="image_path" label="图样"> 
                                    <template slot-scope="scope">
                                        <el-image 
                                                style="width: 40px; height: 40px"
                                                :src="scope.row.image_path"
                                                :preview-src-list="[scope.row.image_path]">
                                            </el-image> 
                                    </template> 
                            </el-table-column>
                            <el-table-column prop="sale_state_str" label="物料状态" width="100" sortable>
                            </el-table-column>
                            <el-table-column prop="stock_state_str" label="库存状态" width="100" sortable>
                            </el-table-column>
                            <el-table-column prop="count" label="数量" width="100" sortable>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注" width="250">
                                <template slot-scope="scope">
                                    <el-input ref="input_remark" autocomplete="off" v-model="scope.row.remark" @input="remark_change"></el-input>
                                </template> 
                            </el-table-column> 
                        </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn">保存</el-button>
        </div>
      </el-dialog>  
 
 
    </div>
  </template> 
    <style>
    .el-table .warning-row {
    background: oldlace;
    }

    .el-table .success-row {
    background: #f0f9eb;
    }
    </style>
  <script>  
  import { pcaTextArr } from 'element-china-area-data'
  import * as imageConversion from 'image-conversion' 
  import Cookies from 'js-cookie';
  export default { 
    data() {
      return { 
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        token:Cookies.get('crmtoken'),
        btnloading: false,  
        query_form: {
            SerchKeyword: '', 
            page: 1,
            pagesize: 20
        }, 
        add_form: {
            nw_factory_order_id: '',
            order_name: '',
            details:[], 
            remark:'', 
        },
        rule: {
          
        },
        pcaTextArr,
        selectedOptions:[],
        list: null,
        alllist: null,
        total: 0,
        listLoading: true,
        adddialog: false,
        editdialog: false,
        addicondia: false,
        editicondia: false,
        material_list:[
        {
            type_id:'',
            type_name:'',
            inner_list:[
              {
                image_path:'',
                material_id:'',
                material_name:'',
                material_no:'',
                nw_type_id:'',
                out_count:0,
                return_count:0,
                need_count:0,
                remark:'',
                factory_order_details_state:0,
                count:0
              }
            ]
          }
        ],
        def_tab:'',
        replenishment_dialog:false,
        replenishment_activity_id:'',
        replenishment_material_list:[
          {
            type_id:'',
            type_name:'',
            inner_list:[
              {
                image_path:'',
                material_id:'',
                material_name:'',
                material_no:'',
                nw_type_id:'',
                out_count:0,
                return_count:0,
                need_count:0
              }
            ]
          }
        ],
        replenishment_def_tab:'',
        replenishment_form:{
          details:[]
        },
        replenishment_rule:{},
        fileList:[],
        table_reload_key:Math.random()
      };
    }, 
    created() {   
      this.getlistdata();
      this.get_simple_material();
    },
    methods: {
        factory_order_state_change(val,row){
           
        },
        remark_change(val){
            console.log(this.$refs["input_remark"]);
            this.$refs["input_remark"][0].$forceUpdate()
        },
        /* state_sort(obj1,obj2){ 
            var a = obj1.factory_order_details_state;
            var b = obj2.factory_order_details_state;
            return a-b;
        }, */
       tableRowClassName({x, rowIndex}) {
        console.log(x); 
        return '';
      },
      getlistdata(isquery) {
        this.listLoading = true;
        if (isquery === true) {
          this.query_form.page = 1
        }
        this.$post(this.$api + '/nw/get_factory_order_pagelist',this.query_form, false, this)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }, 
      create_new_factory_order(){
                 var this_material_list = [...this.material_list];  
                 if(this_material_list.length>0)
                 { 
                    this.def_tab = this_material_list[0].type_id; 
                 } 
                 this_material_list.forEach(s=>{
                    s.inner_list.forEach(x=>{ 
                        if(x.sale_state == 0){
                            x.factory_order_details_state = 1;
                        }
                        else
                        {
                          x.factory_order_details_state = 0;
                        }
                        x.remark=""; 
                    });
                 }); 
                 this.material_list  = this_material_list;
                 
             this.adddialog =true;
      },
      addbtn() {  
        this.$refs["add_form"].validate((valid) => {
          if (valid) {
            //验证通过开始处理符合条件的数据
            this.listLoading = true; 

            var sub_material_details = [];
            this.material_list.forEach(s=>{
                s.inner_list.forEach(x=>{
                    var item = {};
                    item.material_id =x.material_id;
                    item.remark =x.remark; 
                    item.factory_order_details_state =x.factory_order_details_state;
                    sub_material_details.push(item);
                });
            }); 
            this.add_form.details  = sub_material_details; 
            this.$post(this.$api + '/nw/save_factory_order', this.add_form)
            .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                });
                this.adddialog = false;
                this.add_form = { 
                    nw_factory_order_id: '',
                    order_name: '',
                    details:[], 
                    remark:'', 
                };
                this.material_list.forEach(s=>{
                    s.inner_list.forEach(x=>{ 
                        x.remark = ""; 
                        x.factory_order_details_state = 1
                    });
                });    
                this.getlistdata(); 
                } else {
                this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                });
                }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        }); 
      },
      openedit(item) {
            this.adddialog = true;
            for(var i in this.add_form)
            { 
                 this.add_form[i] = item[i];  
            }  
            this.$get(this.$api+"/nw/get_factory_order_model",{'nw_factory_order_id':item.nw_factory_order_id}).then(res=>{
              if(res.code ==0)
              { 
                var this_material_list = [...this.material_list];
                this_material_list.forEach(s=>{
                  s.inner_list.forEach(x=>{
                        res.data.details.forEach(z=>{
                            if(z.material_id == x.material_id)
                            {
                              x.remark = z.remark;
                              x.factory_order_details_state = z.factory_order_details_state;
                              x.count = z.count; 
                              return;
                            }
                        });
                    });
                });   
                 if(this_material_list.length>0)
                 {  
                    this.def_tab = this.material_list[0].type_id;
                 }
                 this.table_reload_key = Math.random(); 
                 this.material_list = this_material_list;
              }
              else{
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });  
      }, 
      delbtn(item) {
        this.$confirm('确认删除？?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$get(this.$api + '/nw/del_factory_order', {
            'nw_factory_order_id': item.nw_factory_order_id
          })
            .then((res) => {
              this.listLoading = false;
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.getlistdata();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        })
      },
      handleSizeChange(v) {
        this.form.pagesize = v;
        this.getlistdata();
      },
      handleCurrentChange(v) {
        this.form.page = v;
        this.getlistdata();
      },
      get_simple_material(){ 
        //获取所有库存信息
        this.$get(this.$api+"/nw/get_material_all_list?is_factory_order=true").then(res=>{ 
            if (res.code === 0) {  
                var this_material_list = res.data;  
                 if(res.data.length>0)
                 { 
                    this.def_tab = res.data[0].type_id; 
                 } 
                 this_material_list.forEach(s=>{
                    s.inner_list.forEach(x=>{ 
                       /*  if(x.sale_state == 0)
                        {
                            if(x.stock_state == 2 || x.stock_state == 3 || x.stock_state == 4)
                            {
                                x.factory_order_details_state = 1;
                            
                            }
                            else{
                                x.factory_order_details_state = 0;
                            }
                        }
                        else{
                            x.factory_order_details_state = 0;
                        } */
                        if(x.sale_state == 0){
                            x.factory_order_details_state = 1;
                        }
                        else
                        {
                          x.factory_order_details_state = 0;
                        }
                        x.remark="";
                    });
                 }); 
                 this.material_list  = this_material_list;
              } else {
                this.$notify({
                  title: '获取物料信息异常',
                  message: res.msg,
                  type: 'error'
                });
              }
        });
      }
    }
  };
  </script>
  
  